<template>
  <el-container class="setting_message-setting">
    <el-main>
      <el-card shadow="never" class="commercial-tenant-title">
        <el-tabs v-model="tabsName" @tab-click="handleClick">
          <el-tab-pane label="短信服务配置" name="0">
            <SmsServiceSetting :key="isShow0" />
          </el-tab-pane>
          <el-tab-pane label="邮件服务配置" name="1">
            <EmailServiceSetting :key="isShow1" />
          </el-tab-pane>
          <el-tab-pane label="系统消息配置" name="2">
            <SysMsgServiceSetting :key="isShow2" />
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </el-main>
  </el-container>
</template>

<script>
import SmsServiceSetting from './smsServiceSetting'
import EmailServiceSetting from './emailServiceSetting'
import SysMsgServiceSetting from './sysMsgServiceSetting'

export default {
  components: {
    SmsServiceSetting,
    EmailServiceSetting,
    SysMsgServiceSetting
  },
  data() {
    return {
      isShow0: 0,
      isShow1: 0,
      isShow2: 0,
      tabsName: 0
    }
  },
  mounted() {
  },
  methods: {
    handleClick() {
      if (this.tabsName === '0') {
        this.isShow0++
      } else if (this.tabsName === '1') {
        this.isShow1++
      } else if (this.tabsName === '2') {
        this.isShow2++
      }
    }
  }
}
</script>

<style lang="scss">
  .dialog-footer{
    text-align: center;
  }
  .news{
    color: #1890ff;
  }
  .member-content{
    width: 100%;
    >div{
      .cont-pre{
        margin: 0;
        font-family: auto;
      }
      >span{
        cursor: pointer;
      }
    }
  }
</style>
